<template>
    <div>

        <div class="page" @click="close">

            <div style="padding: 10px 0; text-align: center;background-color: white;border-bottom: 1px solid #ccc;">实时效果参考
            </div>

            <div class="inputwrap">
                <div class="tablewrap">
                    <div class="cellwrap">
                        <div style="padding: 10px;white-space: nowrap;font-size: 16px; text-align: center;">
                            输入框
                        </div>
                    </div>
                    <div class="cellwrap" style="width: 100%;">
                        <div class="cellinput">
                            <input type="text" style="width: 100%;font-size: 16px;" placeholder="输入框" readonly>
                        </div>
                    </div>
                    <div class="cellwrap">
                        <div style="padding: 10px;white-space: nowrap;font-size: 16px; text-align: center;">
                            获取验证码
                        </div>
                    </div>
                </div>
            </div>

            <div class="inputwrap">
                <div class="tablewrap">
                    <div class="cellwrap">
                        <div style="padding: 10px;white-space: nowrap;font-size: 16px; text-align: center;">
                            选择项
                        </div>
                    </div>
                    <div class="cellwrap" style="width: 100%;">
                        <div class="cellinput">
                            <select name="" id="" style="width: 100%;pointer-events: none;">
                                <option value="请选择">请选择</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <div class="inputwrap">
                <div class="tablewrap">
                    <div class="cellwrap">
                        <div style="padding: 10px;white-space: nowrap;font-size: 16px; text-align: center;">
                            单选项
                        </div>
                    </div>
                    <div class="cellwrap" style="width: 50%;">
                        <div class="cellinput">
                            <input type="radio" name="1" style="margin-right: 10px;">单选项
                        </div>
                    </div>
                    <div class="cellwrap" style="width: 50%;">
                        <div class="cellinput">
                            <input type="radio" name="1" style="margin-right: 10px;">单选项
                        </div>
                    </div>
                </div>
            </div>

            <div class="inputwrap">
                <div class="tablewrap">
                    <div class="cellwrap">
                        <div style="padding: 10px;white-space: nowrap;font-size: 16px; text-align: center;">
                            复选框
                        </div>
                    </div>
                    <div class="cellwrap" style="width: 100%;">
                        <div class="floatwrap">
                            <div class="cellwrap" style="width: 50%;" v-for="v in 2">
                                <div class="cellinput">
                                    <input type="checkbox" style="margin-right: 10px;">复选框
                                </div>
                            </div>
                            <div style="clear: both;"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="inputwrap">
                <div class="tablewrap">
                    <div class="cellwrap">
                        <div style="padding: 10px;white-space: nowrap;font-size: 16px; text-align: left;">
                            上传图片
                        </div>
                        <div class="tablewrap">
                            <div class="cellwrap" style="width: 50%;">
                                <div class="cellinput">
                                    <div class="uploads">+</div>
                                </div>
                            </div>
                            <div class="cellwrap" style="width: 50%;">
                                <div class="cellinput">
                                    <div class="uploads">+</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="inputwrap">
                <div class="tablewrap">
                    <div class="cellwrap">
                        <div style="padding: 10px;white-space: nowrap;font-size: 16px; text-align: center;">
                            文本框
                        </div>
                    </div>
                    <div class="cellwrap" style="width: 100%;">
                        <div class="cellinput">
                            <textarea style="width: 100%;height:200px;font-size: 16px;resize: none;" placeholder="文本框"
                                readonly></textarea>
                        </div>
                    </div>
                </div>
            </div>


        </div>

    </div>
</template>

<script>
export default {
    methods: {
        close() {
            this.$emit('close')
        }
    }
}
</script>

<style scoped>
.page {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    z-index: 8;
    overflow: hidden auto;
}

.inputwrap {
    padding: 20px 20px 0;
}

.tablewrap {
    display: table;
    width: 100%;
    background-color: white;
}

.cellwrap {
    display: table-cell;
    vertical-align: top;
}

.floatwrap {
    width: 100%;
    background-color: white;
    cursor: pointer;
}

.floatwrap .cellwrap {
    display: block;
    float: left;
}

.cellinput {
    padding: 10px;
}

.uploads {
    height: 120px;
    line-height: 120px;
    text-align: center;
    font-size: 50px;
    font-weight: 800;
    color: #999;
    user-select: none;
}
</style>